<template>
  <div class="authority">
    <div class="content">
      <div class="top">
        <div class="title-wrapper">
          <div
            v-for="(item, index) of title"
            :key="index"
            class="title"
            @click="titleClick(index)"
          >{{ item }}</div>
        </div>
        <el-button v-if="isTableList" type="primary" @click.native="add">添加</el-button>
        <el-button v-else type="primary" @click.native="save">保存</el-button>
      </div>
      <div class="middle">
        <component :is="cmpName" :id="id" ref="component" :auth-info="authInfo" :list="list" @editAuth="handleEditAuth" @upDated="handleUpDated" @deleteAdmin="handleDeleteAdmin" @added="handleAdded" />
      </div>
    </div>
  </div>
</template>
<script>
import { getAuthorityList, deleteAdmin, getAuthInfo } from '@/api/authority'
import TableList from './tableList'
import Add from './add'
const ERR_OK = 200
export default {
  components: {
    TableList,
    Add
  },
  data() {
    return {
      title: ['权限管理'],
      cmpName: TableList,
      list: [],
      isTableList: true,
      isEdit: false,
      id: '',
      authInfo: {}
    }
  },
  mounted() {
    this._getAuthorityList()
  },
  methods: {
    titleClick(index) {
      switch (index) {
        case 0:
          this.cmpName = TableList
          this.title.splice(index + 1)
          this.isTableList = true
          this.isEdit = false
          break
        case 1:
          this.cmpName = Add
          this.isTableList = false
          this.isEdit = false
          break
      }
    },
    add() {
      this.cmpName = Add
      this.title.splice(1, 1)
      this.title.push('/' + '添加权限')
      this.isTableList = false
      this.isEdit = false
    },
    save() {
      if (!this.isTableList && !this.isEdit) {
        this.$refs.component.addAdmini()
      } else {
        this.$refs.component.editAdmini()
      }
    },
    handleEditAuth(id) {
      this.cmpName = Add
      this.title.splice(1, 1)
      this.title.push('/' + '编辑权限')
      this.isTableList = false
      this.isEdit = true
      this.id = id
      this._getAuthInfo(id)
    },
    handleUpDated() {
      this.cmpName = TableList
      this.isEdit = false
      this.isTableList = true
      this._getAuthorityList()
    },
    handleDeleteAdmin(id) {
      this._deleteAdmin(id)
        .then((res) => {
          this._deleteItem(id)
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleAdded() {
      this.cmpName = TableList
      this.isEdit = false
      this.isTableList = true
      this._getAuthorityList()
    },
    _deleteItem(id) {
      const fIndex = this.list.findIndex((item, index) => {
        return item.id === id
      })
      if (fIndex >= 0) {
        this.list.splice(fIndex, 1)
      }
    },
    _getAuthorityList() {
      getAuthorityList()
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _deleteAdmin(id) {
      return new Promise((resolve, reject) => {
        deleteAdmin(id)
          .then(res => {
            if (res.code === ERR_OK) {
              this.$message({
                showClose: true,
                message: res.message,
                type: 'success'
              })
            }
            resolve(res)
          })
          .catch(err => {
            reject(err)
          })
      })
    },
    _getAuthInfo(id) {
      getAuthInfo(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.authInfo = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
.authority {
  padding: 0 20px;
  box-sizing: border-box;
  .content {
    min-height: 105vh;
    .top {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      .title-wrapper {
        display: flex;
        align-content: center;
        .title {
          height: 44px;
          line-height: 44px;
          color: rgba(68, 68, 68, 1);
          font-size: 18px;
          font-family: Roboto;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
